<template>
	<div class="list" ref = "wrapper">
		<div class="">					
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button">{{currentCity}}</div>	
					</div>					
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list">
					<div class="button-wrapper" v-for="item of hot" :key="item.id">
						<div class="button"  @click="handleCityClick(item.name)">{{item.name}}</div>	
					</div>
					
				</div>
			</div>
			<div class="area"
			 v-for="(item,key) of cities"
			  :key = "key"
			  :ref = "key"
			  >
				<div class="title border-topbottom">{{key}}</div>
				<div class="item-list">
					<div class="item border-bottom"
					@click="handleCityClick(innerItem.name)"
					v-for="innerItem of item" :key ="innerItem.id">
						{{innerItem.name}}
					</div>
			
				</div>
			</div>	
			
		</div>	
	</div>
</template>
<script>
	import Bscroll from 'better-scroll'
	import {mapState,mapMutations} from 'vuex'
	export default {
		name: "CityList",
		props:{
			cities:Object,
			hot:Array,
			letter:String
		},
		mounted:function(){
			this.scroll = new Bscroll(this.$refs.wrapper)			
		},
		computed:{
			...mapState({
				currentCity:'city'//映射vux里面的city 计算属性中的currentCity
			})
		},
		methods:{
			handleCityClick:function(city){
				this.$store.dispatch('changeCity',city)
				this.$router.push("/")
			},
			//...mapMutations(['changeCity']) //把mutation的方法调用映射到changeCity里面
			//所以不需要用commit来调用了 直接用changeCity(city) 就可以了
		},
		watch:{
			letter:function(){
				var el = this.$refs[this.letter][0]	
				this.scroll.scrollToElement(el,1000)//滚动到某个位置
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list {
		overflow: hidden;
		position: absolute;
		top: 1.58rem;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.border-topbottom:before{
		border-color: #ccc;
	}
	.border-topbottom:after{
		border-color: #ccc;
	}
	.title{		
		line-height: .54rem;
		background: #eee;
		padding-left: .2rem;
		color: #666;
		font-size: .26rem;
	}
	.button-list {
		padding: .1rem .6rem .1rem .1rem;
		overflow: hidden;
	}
	.button-wrapper {
		float: left;
		width: 33.3%;
	}
	.button {
		margin: .1rem;
		text-align: center;
		border:.02rem solid #ccc;
		border-radius: .06rem;
		padding:.1rem 0 ;
	}
	.item-list {
		
	}
	.item {
		line-height: .74rem;
		padding-left: .2rem;
		color: #666;
	}
	.border-bottom:before {
		border-color: #ccc;
	}
</style>